<template>
  <div>
    <Header></Header>

    <!--主体-->
    <!-- 主体banner -->
    <div class="banner cinema-banner">
      <div class="wrapper clearfix">
        <div class="cinema-left">
          <div class="avatar-shadow">
            <img class="avatar" src="../assets/cinemadetail/3.png" alt="" />
          </div>
        </div>
        <div class="cinema-main clearfix">
          <div class="cinema-brief-container">
            <h1 class="name text-ellipsis">{{ cinema.name }}</h1>
            <div class="address text-ellipsis">
              {{ cinema.address }}
            </div>
            <div class="telphone">电话：{{ cinema.phone }}</div>
            <div class="group-title">影院服务</div>
            <div
              class="features-group"
              v-for="(item, index) in cinema.services"
              :key="index"
            >
              <div class="feature">
                <span class="tag">{{ item.name }}</span>
                <p class="desc text-ellipsis">
                  {{ item.description }}
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="cinema-map" data-lat="40.070526" data-lng="116.41755">
          <span class="show-map"></span>
        </div>
      </div>
    </div>

    <!-- container -->
    <div class="container">
      <div class="crumbs-nav-container">
        <a href="/">猫眼电影</a> &gt; <a href="/cinema">影院</a> &gt;
        <span>{{ cinema.name }}</span>
      </div>
      
      <!--swiper-->
      <div class="movie-list-container" data-cinemaid="37136">
        <div class="movie-list" v-for="(item, index) in films" :key="index">
          <div
            class="movie"
            :class="isactive == index ? 'active' : ''"
            @click="change(index)"
          >
            <img :src="item.poster" />
          </div>
          <span class="pointer" style="left: 71px"></span>
        </div>

        <span class="scroll-prev scroll-btn"></span>
        <span class="scroll-next scroll-btn"></span>
      </div>

      <!--内容-->
      <div class="show-list">
        <div class="movie-info">
          <div>
            <h2 class="movie-name">{{ film_info.name }}</h2>

            <span class="score sc">{{ film_info.grade }}</span>
          </div>

          <div class="movie-desc">
            <div>
              <span class="key">时长 :</span>
              <span class="value">{{ film_info.runtime }}</span>
            </div>
            <div>
              <span class="key">类型 :</span>
              <span class="value">
                <a class="text-link" href="/films?catId=2" target="_blank">
                  {{ film_info.category }}
                </a>
              </span>
            </div>
            <div>
              <span class="key">主演 :</span>
              <span> {{ film_info.actors | actorFilter }}</span>
            </div>
          </div>
        </div>
      </div>

      <!--时间-->
      <div class="show-date">
        <span>观影时间 :</span>
        <span
          v-for="(n, i) in playdate"
          :key="i"
          class="date-item"
          @click="activeClick(i,n)"
          :class="isactive1 == i ? 'active' : ''"
          >{{ n | dateFilter }}</span
        >
      </div>

      <!--列表-->
      <div
        class="plist-container"
        v-for="item in schedules"
        :key="item.scheduleId">
        <table class="plist">
          <thead>
            <tr>
              <th>放映时间</th>
              <th>语言版本</th>
              <th>放映厅</th>
              <th>售价（元）</th>
              <th>选座购票</th>
            </tr>
          </thead>

          <tbody>
            <tr class="">
              <td>
                <span class="begin-time">{{ item.showAt | timefilter }}</span>
                <br />
                <span class="end-time">{{ item.endAt | timefilter }}散场</span>
              </td>
              <td>
                <span class="lang"
                  >{{ item.filmLanguage }}{{ item.imagery }}</span
                >
              </td>
              <td>
                <span class="hall">{{ item.hallName }}</span>
              </td>
              <td>
                <span class="sell-price"
                  ><span class="stonefont">{{
                    item.salePrice / 100
                  }}</span></span
                >
              </td>
              <td>
                <a class="buy-btn normal" @click="gotoseat(item)">选座购票</a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <low></low>
  </div>
</template>

<script>
import low from "../components/low";
import Header from "../components/Header";
import http from "../api/http";
import moment from "moment";
export default {
  name: "cinemadetail",
  data() {
    return {
      cinema: null,
      films: [],
      isactive: 0,
      playdate: [],
      movied: 0,
      schedules: [],
      zanwu: false,
      film_info: null,
      isactive1:0
    };
  },
  components: {
    low,
    Header
  },
  mounted() {
    http({
      url: `/gateway?cinemaId=${this.$route.query.id}&k=335057`,
      headers: {
        "X-Host": "mall.film-ticket.cinema.info"
      }
    }).then(res => {
      let { cinema } = res.data;
      console.log(res.data);
      this.cinema = cinema;
    });
    http({
      url: `/gateway?cinemaId=${this.$route.query.id}&k=335057`,
      headers: {
        "X-Host": "mall.film-ticket.film.cinema-show-film"
      }
    }).then(res => {
      let { films } = res.data;
      this.films = films;
      console.log(this.films);
      if (this.films.length !== 0) {
        this.film_info = this.films[0];
        this.playdate = this.film_info.showDate;
        this.movied = this.film_info.filmId;
        // 获取电影场次信息
        http({
          url: `/gateway/?filmId=${this.films[0].filmId}&cinemaId=${this.$route.query.id}&date=${this.films[0].showDate[0]}&k=9078974`,
          headers: {
            "X-Host": "mall.film-ticket.schedule.list"
          }
        }).then(res => {
          if (res.status == 0) {
            console.log(res.data);
            this.schedules = res.data.schedules;
          } else {
            return;
          }
        });
      } else {
        this.zanwu = true;
      }
    });
  },
  filters: {
    actorFilter(actors) {
      if (actors === undefined) return "暂无主演";
      return actors.map(item => item.name).join(" ");
    },
    dateFilter(date) {
      return moment(date * 1000).format("MM月DD日");
    },
    // 时间过滤器
    timefilter(time) {
      return moment(time * 1000).format("HH:mm");
    }
  },
  methods: {
    change(index) {
      
      this.film_info = this.films[index];
      this.movied = this.films[index].filmId;
      this.playdate = this.films[index].showDate;
      this.isactive = index;

      // 轮播图改变获取电影场次信息
      http({
        url: `/gateway/?filmId=${this.movied}&cinemaId=${this.$route.params.id}&date=${this.playdate[0]}&k=9078974`,
        headers: {
          "X-Host": "mall.film-ticket.schedule.list"
        }
      }).then(res => {
        if (res.status == 0) {
          this.schedules = res.data.schedules;
        } else {
          return;
        }
      });
    },
    activeClick(index,date) {
      this.isactive1 = index;
      http({
        url: `/gateway/?filmId=${this.movied}&cinemaId=${this.$route.query.id}&date=${date}&k=9078974`,
        headers: {
          "X-Host": "mall.film-ticket.schedule.list"
        }
      }).then(res => {
        if (res.status == 0) {
          this.schedules = res.data.schedules;
        } else {
          return;
        }
      });
    },
    gotoseat(schedule) {
      let id = this.movied;
      this.$router.push({
        path: "/seat",
        query: { id: id, schedule: schedule, cityId: this.$route.query.id }
      });
    }
  }
};
</script>
<style scoped>
/* 主体banner */

.banner {
  width: 100%;
  min-width: 1200px;
  background: #392f59 url(../assets/cinemadetail/1.png) no-repeat 50%;
}
.cinema-banner .wrapper {
  height: 330px;
  position: relative;
  top: 49px;
}
.banner .wrapper {
  width: 1200px;
  margin: 0 auto;
  position: relative;
}
.clearfix:after,
.clearfix:before {
  content: " ";
  display: table;
}
.banner .wrapper .cinema-left {
  width: 360px;
  float: left;
  overflow: hidden;
  z-index: 9;
}
.cinema-left .avatar-shadow {
  width: 300px;
  height: 300px;
  background-size: 300px 50px;
  position: relative;
}
.celeInfo-left .avatar-shadow,
.cinema-left .avatar-shadow {
  position: relative;
  margin: 0 30px;
  width: 240px;
  height: 330px;
  padding-bottom: 40px;
}
.cinema-left .avatar-shadow .avatar {
  border: 4px solid #fff;
  height: 292px;
  width: 292px;
}
.banner .wrapper .cinema-main {
  position: relative;
  float: left;
  max-width: 600px;
  margin-top: -16px;
}
.banner .wrapper .cinema-brief-container {
  color: #fff;
}
.banner .wrapper .cinema-brief-container .name {
  margin: 0;
  font-size: 26px;
  margin-bottom: 9px;
  font-weight: 400;
}
.text-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.banner .wrapper .cinema-brief-container .address,
.banner .wrapper .cinema-brief-container .telphone {
  font-size: 14px;
  margin-bottom: 6px;
}
.banner .wrapper .cinema-brief-container .telphone {
  margin-bottom: 20px;
}
.banner .wrapper .cinema-brief-container .address,
.banner .wrapper .cinema-brief-container .telphone {
  font-size: 14px;
  margin-bottom: 6px;
}
.banner .wrapper .cinema-brief-container .features-group {
  position: relative;
}
.banner .wrapper .cinema-brief-container .features-group .group-title {
  font-size: 14px;
  margin-bottom: 5px;
  overflow: hidden;
  width: 410px;
}
.banner .wrapper .cinema-brief-container .features-group .feature {
  font-size: 12px;
  margin-bottom: 2px;
  position: relative;
  min-height: 22px;
  line-height: 23px;
  -webkit-transform-origin: 0;
  -ms-transform-origin: 0;
  transform-origin: 0;
  -webkit-transform: scale(0.8);
  -ms-transform: scale(0.8);
  transform: scale(0.8);
}
.banner .wrapper .cinema-brief-container .features-group .feature .tag {
  display: inline-block;
  border: 1px solid hsla(0, 0%, 100%, 0.6);
  border-radius: 2px;
  min-width: 60px;
  height: 22px;
  line-height: 23px;
  text-align: center;
}
.banner .wrapper .cinema-brief-container .features-group .feature .desc {
  display: inline-block;
  max-width: 438px;
  margin-left: 5px;
  vertical-align: middle;
}
.banner .wrapper .cinema-map {
  width: 200px;
  height: 200px;
  float: right;
  background-color: #fff;
  position: relative;
  margin-top: 50px;
}
.banner .wrapper .cinema-map .show-map {
  position: absolute;
  width: 36px;
  height: 29px;
  background: url(../assets/cinemadetail/4.png) no-repeat;
  bottom: 0;
  right: 0;
  z-index: 10;
}

/* container */
.container {
  width: 1200px;
  margin: 120px auto;
}
.crumbs-nav-container {
  margin-bottom: 25px;
  font-size: 14px;
  color: #666;
  margin-top: -55px;
}
.crumbs-nav-container a {
  color: inherit;
}

/* 轮播图 */
.movie-list-container {
  height: 280px;
  padding: 22px 5px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-shadow: inset 0 0 100px 80px #ededed;
  box-shadow: inset 0 0 100px 80px #ededed;
  position: relative;
  overflow:hidden;
}
.movie-list-container .movie-list {
  white-space: nowrap;
  position: relative;
  display: table;
  left: 0;
  -webkit-transition: left 0.2s ease;
  transition: left 0.2s ease;
  float: left;
}
.movie-list-container .movie {
  width: 162px;
  height: 227px;
  border: 4px solid #fff;
  -webkit-box-shadow: 0 1px 3px 0 hsl(0deg 0% 66% / 50%);
  box-shadow: 0 1px 3px 0 hsl(0deg 0% 66% / 50%);
  display: inline-block;
  -webkit-transform-origin: 50%;
  -ms-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-transform: scale(0.82);
  -ms-transform: scale(0.82);
  transform: scale(0.82);
  -webkit-transition: -webkit-transform 0.1s;
  transition: -webkit-transform 0.1s;
  transition: transform 0.1s;
  transition: transform 0.1s, -webkit-transform 0.1s;
  word-spacing: 0;
}
.movie-list-container .movie img {
  width: 100%;
  height: 100%;
}
.movie-list-container .movie.active {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  border-color: #f24030;
}
.movie-list-container .pointer {
  position: absolute;
  display: block;
  content: "";
  bottom: -23px;
  left: 71px;
  border-style: solid;
  border-width: 11px 14px;
  border-color: transparent transparent #fff;
}
.movie-list-container .scroll-prev {
  left: 0;
  background-image: url(../assets/cinemadetail/5.png);
}
.movie-list-container .scroll-btn {
  display: inline-block;
  position: absolute;
  width: 30px;
  height: 100%;
  top: 0;
  background-repeat: no-repeat;
  background-position: 50%;
}
.movie-list-container .scroll-next {
  right: 0;
  background-image: url(../assets/cinemadetail/6.png);
}


.active {
  display: block;
}
 {
  display: none;
}
 .movie-info {
  margin-top: 20px;
  border-bottom: 1px solid #e5e5e5;
}
 .movie-info .movie-name {
  display: inline-block;
  margin: 0 20px 20px 0;
  font-size: 26px;
  font-weight: 400;
  color: #333;
}
 .movie-info .score {
  display: inline-block;
  font-size: 24px;
  color: #faaf00;
}
 .movie-info .sc:after {
  content: "\5206";
  font-size: 12px;
}
 .movie-info .movie-desc > div {
  display: inline-block;
  font-size: 14px;
  color: #151515;
  margin-bottom: 20px;
  margin-right: 40px;
}
 .movie-info .movie-desc .key {
  color: #999;
}
 .show-date {
  padding: 30px 0;
  font-size: 14px;
  color: #999;
}
 .show-date .date-item.active {
  color: #fff;
  background-color: #f03d37;
}
 .show-date .date-item {
  display: inline-block;
  background-color: transparent;
  border-radius: 100px;
  color: #333;
  padding: 2px 10px;
  margin-left: 12px;
  cursor: default;
}
 .plist-container.active {
  display: block;
}
 .plist-container {
}
 .plist {
  width: 100%;
  border: none;
  border-spacing: 0;
}
 .plist thead {
  background-color: #f7f7f7;
  color: #333;
  font-size: 16px;
  padding: 18px 0;
}
 .plist thead th {
  padding: 16px 0;
}
 .plist tbody tr {
  height: 82px;
}
 .plist tbody td {
  text-align: center;
  width: 20%;
}
 .plist tbody .begin-time {
  font-size: 18px;
  color: #333;
  font-weight: 700;
}
 .plist tbody .end-time {
  font-size: 12px;
  color: #999;
}
 .plist tbody .even {
  background-color: #f9f9f9;
}
 .plist tbody tr {
  height: 82px;
}
</style>
